<template>
  <div class="table-text-area">
    <div class="table-text-area-view">
      <div class="table-text-area-value sle mr4" v-if="!isEdit">{{ value }}</div>
      <el-icon
        class="edit-icon"
        @click="
          () => {
            isEdit = !isEdit;
            if (inputRef) inputRef.focus();
          }
        "
      >
        <EditPen />
      </el-icon>
    </div>
    <el-input
      ref="inputRef"
      class="table-text-area-model"
      :class="{ 'table-opacity': isEdit }"
      v-model="value"
      type="textarea"
      :autosize="true"
      @blur="
        () => {
          isEdit = false;
          emits('change', value);
        }
      "
      resize="none"
    ></el-input>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { EditPen } from "@element-plus/icons-vue";
const emits = defineEmits(["change"]);
const inputRef = ref(null);
const value = defineModel("value", {
  type: String,
  default: ""
});
const isEdit = ref(false);
</script>
<style lang="scss" scoped>
.table-text-area {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
  .table-text-area-view {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .edit-icon {
      color: #aaa;
      cursor: pointer;
      opacity: 0;
    }
  }
  &:hover {
    .table-text-area-view {
      .edit-icon {
        opacity: 1;
      }
    }
  }
}
.table-text-area-model {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  // height: 100%;
  opacity: 0;
  z-index: -1000;
  .el-textarea__inner {
    min-height: 100% !important;
  }
}
.table-opacity {
  opacity: 1;
  z-index: 2;
}
</style>
<style lang="scss">
.table-text-area-model {
  width: 100%;
  min-height: 100%;
  height: 100%;
  .el-textarea__inner {
    min-height: 100% !important;
  }
}
</style>
